<template>
  <div class="address">
    <div class="titledesc">
      <div>
        <el-link type="primary"><span>收货地址</span></el-link>
        <el-button size="large" v-if="addressList.length!==20" style="margin-right: 20px" @click="addAddress">添加</el-button>
        <el-button size="large" v-else style="margin-right: 20px" disabled>添加</el-button>
      </div>
    </div>
    <p class="tip"><el-icon><WarningFilled /></el-icon>您已经添加了{{ addressList.length }}条地址 还可以添加{{20 - addressList.length}}条</p>
    <div class="container">
      <table>
        <div class="info">
          <tr>
            <td>序号</td>
            <td>地址信息</td>
            <td>联系电话</td>
            <td>联系人</td>
            <td>是否默认</td>
            <td>操作</td>
          </tr>
        </div>
        <div class="info" v-for="(i,index) in addressList" :key="index">
          <tr>
            <td>{{ index + 1 }}</td>
            <td style="overflow:hidden;">{{ i.addressInfo }}</td>
            <td>{{ i.realPhone }}</td>
            <td>{{ i.realPhone }}</td>
            <td><el-switch v-model="i.isdefualt" style="--el-switch-on-color: #13ce66;"></el-switch></td>
            <td style="display:flex;justify-content: space-evenly">
              <el-link type="danger">删除</el-link>
              <el-link type="primary">编辑</el-link>
            </td>
          </tr>
        </div>
      </table>
      <!--添加地址的弹出框-->
      <el-dialog v-model="dialogFormVisible" title="Shipping address" width="400px" style="border-radius: 10px;">
        <el-form :model="form" label-position="left" label-width="140px">
          <el-form-item label="联系人:">
            <el-input placeholder="请输入信息" clearable v-model="form.name"  />
          </el-form-item>
          <el-form-item label="联系电话:" >
            <el-input placeholder="请输入信息" v-model="form.name" />
          </el-form-item>
          <el-form-item label="选择地址:">
            <el-cascader
                placeholder="请选择"
                v-model="value"
                :options="options"
                :props="props"
                @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="详细地址:">
            <el-input placeholder="请输入信息" clearable v-model="form.name" />
          </el-form-item>
          <el-form-item label="是否设为默认地址:">
            <el-switch></el-switch>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
        >确认</el-button
        >
      </span>
        </template>
      </el-dialog>
      <!--分页-->
      <el-pagination
          style="justify-content: center;margin: 20px 0 10px 0"
          background
          layout="prev, pager, next"
          :total="50"
          class="mt-4"
      />
    </div>
  </div>
</template>

<script setup>
  import {ElMessage} from "element-plus";
  import {reactive, ref} from "vue";
  import { ElNotification } from 'element-plus'

  // 地址相关


  let addressList = reactive([
      {
        addressInfo:'湖南省 长沙市 长沙县 大众传媒职业技术学院',
        realPhone:'17677778888',
        realName:'李星河',
        isdefualt:false
      },
      {
        addressInfo:'湖南省 长沙市 长沙县 大众传媒职业技术学院',
        realPhone:'17677778888',
        realName:'李星河',
        isdefualt:false
      },
      {
        addressInfo:'湖南省 长沙市 长沙县 大众传媒职业技术学院',
        realPhone:'17677778888',
        realName:'李星河',
        isdefualt:false
      },
      {
        addressInfo:'湖南省 长沙市 长沙县 大众传媒职业技术学院',
        realPhone:'17677778888',
        realName:'李星河',
        isdefualt:false
      },
    ])

  // 地址弹出框
  let dialogFormVisible = ref(false)
  const formLabelWidth = '140px'

  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })

  const addAddress = () => {
    // ElMessage.success('请稍后')
    // addressList.push({
    //   addressInfo:'湖南省 长沙市 长沙县 湖南工程职业技术学院',
    //   realPhone:'17677778888',
    //   realName:'李星河',
    //   isdefualt:false
    // })
    console.log(dialogFormVisible.value);
    dialogFormVisible.value = true
    // ElNotification({
    //   title: 'Tip',
    //   type:'success',
    //   message: '添加成功',
    //   duration:2000,
    // })
  }

  //级联选择器 选择地址
  const value = ref([])

  const props = {
    expandTrigger: 'hover',
  }

  const handleChange = (value) => {
    console.log(value)
  }

  const options = [
    {
      value: 'guide',
      label: 'Guide',
      children: [
        {
          value: 'disciplines',
          label: 'Disciplines',
          children: [
            {
              value: 'consistency',
              label: 'Consistency',
            },
            {
              value: 'feedback',
              label: 'Feedback',
            },
            {
              value: 'efficiency',
              label: 'Efficiency',
            },
            {
              value: 'controllability',
              label: 'Controllability',
            },
          ],
        }
      ]
    }
  ]

</script>

<style scoped lang="scss">
  .address{
    .titledesc {
      border-bottom: 1px solid gainsboro;
      margin-bottom: 10px;
      span {
        font-size: 20px;
        display: block;
        padding: 10px 0;
      }
      &>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .container {
    min-height: 400px;
    margin-top: 30px;
    /*border: #f1e3e3 1px solid;*/
    table {
      min-height: 400px;
      width: 100%;
      text-align: center;
      .info {
        width: 100%;
        height: 60px;
        border-top: 1px solid antiquewhite;
      }
      div {
        tr {
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          height: 100%;
          align-items: center;
          color: #cf903c;
          td {
            flex: 1;
          }
          td:nth-of-type(2) {
            flex: 2;
          }
        }
      }
    }
  }
  .tip {
    margin: 0;
    color: #c9adcb;
    display: flex;
    align-items: center;
    padding: 10px;
    background: #eccece;
    /*transition: all 0.3s linear;*/
    /*transform: translate(50px 20px);*/
  }
</style>
